<!--
 * @Description: 添加
 * 
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-04-25 19:18:27
 * @FilePath: /yuxiuproweb/src/views/process/machine/mods/add.vue
-->
<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="shows"
    width="1200px"
    append-to-body
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="140px">
      <el-row>
        <el-col :span="9">
          <el-form-item label="窗帘复杂加工名称" prop="complexMachiningName">
            <el-input
              v-model="form.complexMachiningName"
              placeholder="请输入窗帘复杂加工名称"
            />
          </el-form-item>
          <el-form-item label="别名" prop="alias">
            <el-input v-model="form.alias" placeholder="请输入别名" />
          </el-form-item>
          <el-form-item label="类型" prop="type">
            <el-select
              v-model="form.type"
              placeholder="请选择类型"
              style="width: 100%"
            >
              <el-option
                v-for="item in TYPES"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="描述" prop="isDescribe">
            <el-input
              type="textarea"
              :rows="3"
              v-model="form.isDescribe"
              placeholder="请输入描述"
            />
          </el-form-item>
          <el-form-item label="是否启用" prop="enableFlag">
            <el-switch
              v-model="form.enableFlag"
              active-value="Y"
              inactive-value="N"
            ></el-switch>
          </el-form-item>
          <el-form-item label="价格模型" prop="chargeUnit">
            <el-select
              v-model="form.chargeUnit"
              placeholder="请选择价格模型"
              style="width: 100%"
            >
              <el-option
                v-for="item in CHARGE_UNIT"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="图片">
            <image-upload v-model="form.image" />
          </el-form-item>
        </el-col>
        <el-col :span="15">
          <div class="open-right">
            <el-row>
              <el-col :span="14">
                <el-form-item
                  label="关联模型"
                  prop="modelId"
                  label-width="70px"
                >
                  <el-select
                    v-model="form.modelId"
                    placeholder="请选择关联模型"
                    style="width: 100%"
                    @change="handlerModelChange"
                  >
                    <el-option
                      v-for="item in modelList"
                      :key="item.mdComplexMachiningModelId"
                      :label="item.name"
                      :value="item.mdComplexMachiningModelId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="mt10 mb10">
              <el-col :span="24">
                <el-table ref="multipleTable" :data="fabricList">
                  <el-table-column
                    width="50"
                    label="序号"
                    align="center"
                    type="index"
                  />
                  <el-table-column label="位置" prop="part">
                    <template slot-scope="{ row }">
                      <template v-if="row.type === '0'">
                        {{
                          getTypeName(
                            dict.type.md_complex_machining_model_part_1,
                            row.part
                          )
                        }}
                      </template>
                      <template v-else-if="row.type === '1'">
                        {{
                          getTypeName(
                            dict.type.md_complex_machining_model_part_2,
                            row.part
                          )
                        }}
                      </template>
                    </template>
                  </el-table-column>
                  <el-table-column label="类型" prop="type">
                    <template slot-scope="{ row }">
                      {{
                        row.type === "0"
                          ? "面料"
                          : row.type === "1"
                          ? "辅料"
                          : ""
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column label="品名" prop="fabricName">
                    <template slot-scope="{ row, $index }">
                      <el-link
                        type="primary"
                        @click="selectName(row, $index)"
                        >{{ row.fabricName || "未选料" }}</el-link
                      >
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="主布定高时用料方向"
                    prop="fixedHeightDirection"
                    width="150"
                  >
                    <template slot-scope="{ row }">
                      <el-select
                        v-model="row.fixedHeightDirection"
                        clearable
                        placeholder="请选择"
                        style="width: 100%"
                        size="mini"
                      >
                        <el-option label="定宽" value="0"> </el-option>
                        <el-option label="定高" value="1"> </el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="主布定宽时用料方向"
                    prop="fixedWidthDirection"
                    width="150"
                  >
                    <template slot-scope="{ row }">
                      <el-select
                        v-model="row.fixedWidthDirection"
                        clearable
                        placeholder="请选择"
                        style="width: 100%"
                        size="mini"
                      >
                        <el-option label="定宽" value="0"> </el-option>
                        <el-option label="定高" value="1"> </el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-descriptions direction="vertical" :column="2" border>
                  <el-descriptions-item label="价格">单价</el-descriptions-item>
                  <el-descriptions-item label="出厂价">
                    <el-form-item label-width="0" prop="factoryPrice">
                      <el-input-number
                        style="width: 175px"
                        v-model="form.factoryPrice"
                        placeholder="请输入"
                        clearable
                        :min="0"
                        :controls="false"
                        :precision="2"
                      ></el-input-number>
                    </el-form-item>
                  </el-descriptions-item>
                </el-descriptions>
              </el-col>
              <el-col :span="14">
                <el-descriptions
                  class="ml10"
                  direction="vertical"
                  :column="3"
                  border
                >
                  <el-descriptions-item label="价格"
                    >单价<span style="color: red"
                      >(默认价格)</span
                    ></el-descriptions-item
                  >
                  <el-descriptions-item label="经销价">
                    <el-form-item label-width="0" prop="wholesalePrice">
                      <el-input-number
                        style="width: 90px"
                        v-model="form.wholesalePrice"
                        placeholder="请输入"
                        clearable
                        :min="0"
                        :controls="false"
                        :precision="2"
                      ></el-input-number>
                    </el-form-item>
                  </el-descriptions-item>
                  <el-descriptions-item label="零售价">
                    <el-form-item label-width="0" prop="retailPrice">
                      <el-input-number
                        style="width: 90px"
                        v-model="form.retailPrice"
                        placeholder="请输入"
                        clearable
                        :min="0"
                        :controls="false"
                        :precision="2"
                      ></el-input-number>
                    </el-form-item>
                  </el-descriptions-item>
                </el-descriptions>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="shows = false">取 消</el-button>
    </div>

    <!-- 选择材料(面料) -->
    <fabric-part-view
      v-if="part.show"
      :show.sync="part.show"
      @on-change="handlePartChange($event, 1)"
    ></fabric-part-view>

    <!-- 选择材料(辅料) -->
    <other-part-view
      v-if="other.show"
      :show.sync="other.show"
      @on-change="handlePartChange($event, 2)"
    ></other-part-view>
  </el-dialog>
</template>

<script>
import {
  getMachining,
  addMachining,
  updateMachining,
} from "@/api/process/machine";
import { listFabric } from "@/api/process/model";
import { listModel } from "@/api/process/model";
import { CHARGE_UNIT, TYPES } from "../configure";
import FabricPartView from "@/views/material/fabric/mods/part.vue";
import OtherPartView from "@/views/material/other/mods/radioPart.vue";

export default {
  components: {
    FabricPartView,
    OtherPartView,
  },
  dicts: [
    "md_complex_machining_model_part_1",
    "md_complex_machining_model_part_2",
  ],
  props: {
    show: Boolean,
    type: {
      type: String,
      default: "add",
    },
    data: {
      type: Object,
    },
  },
  data() {
    return {
      CHARGE_UNIT,
      TYPES,
      // 表单参数
      form: {
        mdComplexMachiningId: null,
        complexMachiningName: null,
        alias: null,
        type: null,
        isDescribe: null,
        enableFlag: null,
        chargeUnit: null,
        image: null,
        modelId: null,
        factoryPrice: null,
        wholesalePrice: null,
        retailPrice: null,
      },
      // 表单校验
      rules: {
        complexMachiningName: [
          {
            required: true,
            message: "请输入窗帘复杂加工名称",
            trigger: "change",
          },
        ],
        type: [
          {
            required: true,
            message: "请选择类型",
            trigger: "change",
          },
        ],
      },
      modelList: [],
      fabricList: [],
      part: {
        show: false,
        index: -1,
      },
      other: {
        show: false,
        index: -1,
      },
    };
  },
  computed: {
    title() {
      return {
        add: "添加窗帘复杂加工",
        edit: "修改窗帘复杂加工",
      }[this.type];
    },
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  mounted() {
    if (this.type === "edit") {
      this.handleUpdate();
    }
    this.getModelList();
  },
  methods: {
    getFabricList(id) {
      listFabric({
        pageNum: 1,
        pageSize: 100,
        complexMachiningModelId: id,
      }).then(({ rows }) => {
        this.fabricList = rows?.map((e) => ({
          ...e,
          fabricId: null,
          fabricName: "",
          fixedHeightDirection: "1",
          fixedWidthDirection: "0",
        }));
      });
    },
    getModelList() {
      listModel({
        pageNum: 1,
        pageSize: 500,
      }).then(({ rows }) => {
        this.modelList = rows;
      });
    },
    /** 修改按钮操作 */
    handleUpdate() {
      const mdComplexMachiningId = this.data.mdComplexMachiningId;
      getMachining(mdComplexMachiningId).then(({ data }) => {
        this.form = data;
        this.fabricList = data.complexMachiningFabricList;
      });
    },
    /** 选择模型回调 */
    handlerModelChange(val) {
      this.getFabricList(val);
    },
    /** 选择品名 */
    selectName(row, index) {
      if (row.type === "0") {
        this.part = {
          show: true,
          index,
        };
      } else if (row.type === "1") {
        this.other = {
          show: true,
          index,
        };
      }
    },
    /** 选择材料回调 */
    handlePartChange(data, state) {
      console.log(data);
      const row =
        this.fabricList?.[state === 1 ? this.part.index : this.other.index];
      this.$set(
        this.fabricList,
        state === 1 ? this.part.index : this.other.index,
        {
          ...row,
          fabricId: data?.mdFabricId || data?.otherMaterialId,
          fabricName: data?.name,
          width: data?.width || "",
        }
      );
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.form.complexMachiningModelName =
            this.modelList?.find(
              (e) => e.mdComplexMachiningModelId === this.form?.modelId
            )?.name || "";
          this.form.complexMachiningFabricList = this.fabricList?.map(
            (e, index) => {
              return {
                complexMachiningId: this.form.mdComplexMachiningId || null,
                fabricId: e.fabricId,
                fabricName: e.fabricName,
                fixedHeightDirection: e.fixedHeightDirection,
                fixedWidthDirection: e.fixedWidthDirection,
                part: e.part,
                type: e.type,
                width: e.width,
                serialNumber: index + 1,
                complexMachiningFabricId: e.complexMachiningFabricId || null,
              };
            }
          );
          if (this.form.mdComplexMachiningId != null) {
            updateMachining(this.form).then(() => {
              this.$modal.msgSuccess("修改成功");
              this.shows = false;
              this.$emit("update");
            });
          } else {
            addMachining(this.form).then(() => {
              this.$modal.msgSuccess("新增成功");
              this.shows = false;
              this.$emit("update");
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.open-right {
  margin-left: 20px;
  ::v-deep {
    .el-form-item {
      margin-bottom: 0;
      input {
        text-align: left;
      }
    }
  }
}
</style>
